import React from 'react';

import { Steps, Form, Input, Button, Row, Col, Checkbox, Space, Tooltip, Modal } from 'antd';

import {InfoCircleOutlined} from '@ant-design/icons';
import {Link} from 'react-router-dom';

import styles from './index.less';

import { FormInstance } from 'antd/lib/form';

import 'braft-editor/dist/index.css';

import BraftEditor from 'braft-editor'

const CheckboxGroup = Checkbox.Group;

const { Step } = Steps;
const steps = [
  {
    title: '1',
    content: '撰写稿件',
  },
  {
    title: '2',
    content: '选择媒体',
  },
  {
    title: '3',
    content: '确认付款',
  },
];

class HintModel extends React.Component{
	render(): React.ReactNode {
		const { visible } = this.props;
		return (<>
			<Modal title="提示" cancelText={'在等等，以免出错'} okText={'传完了，开始排版'} visible={visible} onOk={() => this.props.handelCancel()} onCancel={() => this.props.handelCancel()}>
				<p>此功能需要在所以图片都上传完毕以后方可使用！</p>
			</Modal>
		</>)
	}
}

export default class Message extends React.Component{
	state = {
		current: 0,
		editorState: null,
		hintVisible: false
	}
	formRef = React.createRef<FormInstance>();
	handleEditorChange = (editorState) => {
		console.log(editorState)
	}
	submitContent = () => {
		const htmlContent = this.state.editorState.toHTML();
		console.log(htmlContent)
	}
	render(){
		const { editorState,hintVisible } = this.state
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<div className={styles.top}>
					<Steps current={this.state.current} labelPlacement="vertical">
				        {steps.map(item => (
				          <Step key={item.title} title={item.content} />
				        ))}
				    </Steps>
				</div>
				<div className={styles.main}>
					<Form ref={this.formRef}>
						<Row>
							<Col span={12}>
								<Form.Item
			                        name="value"
			                        label="稿件标题"
			                        rules={[{ required: true, message: '请输入标题，建议字数控制在16-24字。' }]}
			                    >
			                        <Input style={{width: 400}} placeholder="请输入标题，建议字数控制在16-24字。" />
			                	</Form.Item>
			                	<Form.Item label="转载链接" name="value1">
				                	<Space>
				                		<Form.Item>
				                        <Input style={{width: 400}} placeholder="例：http://news.qq.com/a/20180211/013386.htm" />
				                		</Form.Item>
				                		<Tooltip title="如果您的稿件已经发布过，可直接填写转载链接，不用再填写稿件内容。">
				                			<span style={{fontSize: 30,float: 'left',marginTop: -22,color: 'red'}}>
				                				<InfoCircleOutlined  />
				                			</span>
									            
									    </Tooltip>
				                	</Space>
			                	</Form.Item>
			                	
							</Col>
							<Col span={24}>
								<Form.Item>
									<div className={styles.mainContent}>
										{/* <Button type="link" size="small" style={{marginRight: 10}}>没有稿件？发布代写</Button> */}
										<Button type="primary" size="small" style={{marginRight: 10}}>Word文档上传</Button>
										<Button type="primary" size="small" style={{marginRight: 10}} onClick={() => this.setState({hintVisible: true})}>一键排版</Button>
									</div>
								</Form.Item>
								<Form.Item>
									<div className={styles.content}>
										<div className="my-component">
											<BraftEditor
									          value={editorState}
									          onChange={(editorState) => {
									          	this.handleEditorChange(editorState);
									          }}
									          onSave={() => {
									          	this.submitContent();
									          }}
									        />
										</div>
									</div>
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
			                        name="value2"
			                        label="出稿备注"
			                    >
			                    	<Input placeholder="发稿有特殊要求可写上，但不保证能满足所有要求（选填，给编辑看的）" />
			                    </Form.Item>
			                    <Form.Item
			                        name="value3"
			                        label="我的标记"
			                    >
			                    	<Input placeholder="方便自己对稿件进行管理、分类、备注、查询等（选填，给自己看的，不超过15个字）" />
			                    </Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item
			                        name="value4"
			                    >
			                    	<CheckboxGroup options={['我已阅读']}  />
									<Link to="/modelPage/noticeForPublication" target='_blank'>《发稿须知事项》</Link>
			                    </Form.Item>
			                    <Form.Item>
			                    	<Button type="primary" onClick={() => message.info('稿件内容保存成功，即将进入下一步，选择媒体。')} htmlType="submit" style={{marginRight: 10}}>
			                            确认发稿
			                        </Button>
			                        <Button>
			                            生成预览
			                        </Button>
			                    </Form.Item>
							</Col>
						</Row>
					</Form>
					<HintModel visible={hintVisible} handelCancel={() => this.setState({hintVisible: false})} />
				</div>
			</div>
		)
	}
}